<template>
  <div class="log">
    <!--表头-->
    <el-table
      :data="logs"
      class="table"
      border
      :header-cell-style="{textAlign: 'center'}"
      style="width: 80%">
      <!--      序号-->
      <el-table-column
        width="80"
        align="center"
        label="序号">
        <template slot-scope="scope">
          {{ (page.current - 1) * page.size + scope.$index + 1 }}
        </template>
      </el-table-column>
      <!--      其他表头-->
      <el-table-column
        align="center"
        v-for="h in headers" :key="h.prop"
        :prop="h.prop"
        :label="h.label">
      </el-table-column>
    </el-table>
    <!--    页码器-->
    <el-pagination
      :current-page="page.current"
      :page-sizes="page.sizes"
      :page-size="page.size"
      @size-change="sizeChange"
      @current-change="currentChange"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
  </div>
</template>

<script>

import {logGetList} from "../util/request/log";

export default {
  name: "log",
  data() {
    return {
      logs: [],
      headers: [{prop: 'time', label: '行为时间'},
        {prop: 'content', label: '行为名称'},
        {prop: 'uri', label: '请求路径'},
        {prop: 'ip', label: 'IP地址'},
        {prop: 'bz', label: '备注'}
      ],
      page: {
        size: 10,//页大小
        total: 0,
        current: 1,
        sizes: [10, 20, 30, 40, 50]
      },
    }
  },
  mounted() {
    this.query(1, this.page.size)
  },
  methods: {
    sizeChange(val) {
      this.query(1, val)
    },
    currentChange(val) {
      this.page.current = val
      this.query(val, this.page.size)
    },
    query(pageNum, pageSize) {
      logGetList({pageNum, offset: pageSize})
        .then(res => {
          let data = res.data
          this.logs = data.data.list
          this.page.size = data.data.pageSize
          this.page.total = data.data.total
        })
    }
  }
}
</script>

<style scoped>

.log {
  border: lightgray 1px solid;
  border-radius: 10px;
  margin: 20px auto;
  padding: 20px;
  box-shadow: 3px 3px 10px lightgray;
  width: 90%;
}

.el-pagination {
  margin-top: 20px;
}
</style>
